import React, { Component } from 'react'
import {handleResize} from '../helper/window.js'
import Pagination from './Pagination.js'

const selectRows={

}

export default class SuperTable extends Component {

  state = {
    tableHeight: 300
  }

  componentDidMount() {
    handleResize(this)
  }


  handleClick=(row,e)=>{
    // console.log(row) 点击选中当前行
    let rows
    const { onSelect } = this.props.rowSelection

    if (e.target.checked) {
      selectRows[row.id] = row
    } else {
      delete selectRows[row.id]
    }

   rows = Object.keys(selectRows).map(key => selectRows[key])
    
    onSelect && onSelect(row, rows)
  }

  //  handlePage=( page ,pageSize )=>{
  //       // console.log(page, pageSize)
  //       // this.props.pagination.onChange(page, pageSize)
  //       this.props.pagination.onChange(page, pageSize)
  //   }

  render() {

    const { columns, dataSource, showIndex, rowSelection, pagination} = this.props
    const { current, pageSize } = this.state

    return (
        <section className="content container-fluid">
           <div style={{ height: this.state.tableHeight, overflow: 'auto' }}>
            <table className="table table-bordered table-hover">
              <thead>
                <tr>
                  {rowSelection && <th style={{ width: 30 }}><input type="checkbox" /></th>}
                  {showIndex && <th style={{ width: 30 }}>#</th>}
                  {
                    columns.map((val, index) => (
                      <th key={'th' + index}>{val.title}</th>
                    ))
                  }
                </tr>
              </thead>
              <tbody>
                {
                  dataSource.map((row, index) => (
                    <tr key={'tr' + index}>
                      {rowSelection && <td style={{ width: 30 }}> 
                      <input type="checkbox" key={'ckl_'+ JSON.stringify(row)} onClick={this.handleClick.bind(this, row)} /></td>}
                      {showIndex && <td>{index + 1}</td>}
                      
                      {
                       columns.map((item,index)=>{
                        if(item.render){
                          return <td key={'td_' + index}>{item.render(row)}</td>
                        }else{
                          return <td key={'td_' + index}>{row[item.dataIndex]}</td>
                        }
                       })
                      }

                    </tr>
                  ))
                }
              </tbody>
            </table>
            {/* {
              pagination !== false && <Pagination
                current={pagination.current}
                pageSize={pagination.pageSize}
                total={pagination.total} 
                onChange={this.handlePage}

              />
            } */}
          </div>
        </section>
     
    )
  }
}
